<template>
  <div class="content">
    <button @click="flag = !flag">switch</button>

    <!-- 
      @before-enter="beforeEnter" //对应enter-from
      @enter="enter"//对应enter-active
      @after-enter="afterEnter"//对应enter-to
      @enter-cancelled="enterCancelled"//显示过度打断
      @before-leave="beforeLeave"//对应leave-from
      @leave="leave"//对应enter-active
      @after-leave="afterLeave"//对应leave-to
      @leave-cancelled="leaveCancelled"//离开过度打断
    -->
    <transition
      @before-enter="EnterFrom"
      @enter="EnterActive"
      @after-enter="EnterTo"
      @enter-cancelled="EnterCancle"
      @before-leave="LeaveFrom"
      @leave="LeaveActive"
      @after-leave="LeaveTo"
      @leave-cancelled="LeaveCancle"
      >
      <div v-if="flag" class="box"></div>
    </transition>
    
  </div>
</template>

<script setup lang="ts">
import "animate.css"
import Layout from "./Layout/index.vue"
import { ref } from "vue"

const flag = ref<boolean>(true)

const EnterFrom = (el:Element) => {
  console.log("进入之前", el)
}

const EnterActive = (el:Element, done) => {
  console.log("过渡曲线", el)
  setTimeout(() => {
    done()    // 过渡完成事件
  }, 3000)
}

const EnterTo = (el:Element) => {
  console.log("过渡完成", el)
}

const EnterCancle = (el:Element) => {
  console.log("过渡效果被打断", el)
}

const LeaveFrom = (el:Element) => {
  console.log("离开之前", el)
}

const LeaveActive = (el:Element, done) => {
  console.log("离开曲线", el)
  setTimeout(() => {
    done()    // 过渡完成事件
  }, 5000)
}

const LeaveTo = (el:Element) => {
  console.log("离开完成", el)
}

const LeaveCancle = (el:Element) => {
  console.log("离开效果被打断", el)
}
</script>

<style lang="scss" scoped>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>